<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			/* 画圆 */
			#d1{
				width: 500px;
				height: 500px;
				/* 画圆  边框、背景色 */
				background-color: #aaaaff;
				border-radius: 50%;
				/* 定位无法计算 微调 */
				position: relative;
				left: 290px;
				top:57px;
			}
			#d2{
				width: 400px;
				height: 400px;
				background-color: #aaffff;
				border-radius: 50%;
				/* 定位属性  将元素直接固定到页面上 */
				/* 相对定位 相对于父级元素进行定位  网页 X、Y轴 */
				position: relative;
				left:50px;   /* x轴 横向*/
				top:50px;    /* Y轴 纵向*/
				
			}
			#d3{
				width: 300px;
				height: 300px;
				background-color: #ffaa7f;
				border-radius: 50%;
				position: relative;
				left:50px;
				top:50px;
			}
			/* 棍子 */
			p{
				width: 30px;
				height: 800px;
				background-color: #00ff00;
				transform: rotate(-30deg);
				/* 微调定位 */
				position: relative;
				left: 853px;
				top: -48px;
			}
		</style>
	</head>
	<body>
		<!-- 画三个圆 -->
		<div id="d1">
			<div id="d2">
				<div id="d3"></div>
			</div>
		</div>
		<!-- 画棍 -->
		<p></p>
	</body>
</html>